<template>
	<view class="bind">
		<view class="bg">
			<image :src="$oss('/assets/img/bind.png')" class="swiper" mode="aspectFill"></image>
		</view>
		<view class="main" v-if="project.mini_image">
			<view class="title"></view>
			<view class="desc"></view>
			<image :src="$oss(project.mini_image)" :show-menu-by-longpress="true" class="code" mode=""></image>
		</view>
		<view class="btnBox" v-else-if="project.skill_download">
			<view class="btn" @click="download">立即下载</view>
		</view>
		
	</view>
</template>

<script>
	import configs from '@/common/config.js'
	export default {
		data() {
			return {
				project: uni.getStorageSync('project') || ''
			}
		},
		onLoad() {
			// #ifdef H5
			let info = this.getUrlCode()
			if (info.sale) {
				uni.setStorageSync('invitecode', info.sale);
			}
			if (info.invitecode) {
				uni.setStorageSync('invitecode', info.invitecode);
			}
			
			this.wxLogin()
			// #endif
			if(uni.getStorageSync('project')){
				uni.setNavigationBarTitle({
					title:uni.getStorageSync('project').user_name
				})
			}
			
		},
		methods: {
			download(){
				window.location.href = this.project.skill_download
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},
			wxLogin() {
				this.$wxOauth((res) => {
					uni.setStorageSync('token', res.data.userinfo
						.token);
					uni.setStorageSync('userinfo', res.data
						.userinfo);
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.bind{
	height: 100vh;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.bg{
		flex: 1;
		.swiper{
			width: 100%;
			height: 100%;
		}
	}
	.btnBox{
		padding: 50rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.main{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 100rpx;
		.title{
			font-size: 80rpx;
			color: #fff;
			font-weight: bold;
			
		}
		.desc{
			font-size: 40rpx;
			color: #fff;
			flex: 1;
			margin-top: 30rpx;
		}
	}
	.code{
		// position: absolute;
		// left: 175rpx;
		// bottom: 175rpx;
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
	}

}
</style>
